<%--
  Created by IntelliJ IDEA.
  User: liuqing
  Date: 2024/11/18
  Time: 23:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%@ include file="header.jsp"%>

<main>
    <section>
        <h4>${novels.get(0).category}小说列表</h4>
        <div class="novel-list">
            <c:forEach var="novel" items="${novels}">
                <div class="novel-item" style="width: calc(50% - 0px);">
                    <a href="NovelDetailServlet?novel_id=${novel.novel_id}"><img src="${novel.cover_image_url}"  alt="图片获取失败！" class="novel-cover"></a>
                    <div class="novel-content">
                        <a href="NovelDetailServlet?novel_id=${novel.novel_id}"><h5 class="novel-title">${fn:substring(novel.title, 0, 12)}</h5></a>
                        <p class="novel-author">作者：${novel.author}</p>
                        <p class="novel-status">状态：${novel.statu_s}</p>
                        <p class="novel-update-time">更新时间：${novel.update_time}</p>
                        <p class="novel-latest-chapter">简介：${fn:substring(novel.description, 0, 10)}...</p>
                    </div>
                </div>
            </c:forEach>
        </div>
    </section>
</main>

<script>
    // 获取所有类名为 'novel-cover' 的图片
    var images = document.getElementsByClassName('novel-cover');
    for (var i = 0; i < images.length; i++) {
        // 为每个图片添加 onerror 事件处理函数
        images[i].onerror = function() {
            this.onerror = null; // 防止无限循环
            this.src = 'novelimg/none.jpg'; // 替换为本地图片路径
        };
    }
</script>
<%@ include file="footer.jsp"%>